<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns1" @on-delete="handleDelete"/>
      <Page  :total="dataCount" :page-size="pageSize" @on-change="changepage" @on-page-size-change="_nowPageSize"
            show-total show-sizer show-elevator/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>

    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { getTableData } from '@/api/data'
import CryptoJS from '@/libs/jiami'
import expandRow from './resource-expand.vue'

export default {
  name: 'resource',
  components: {
    Tables
  },
  data () {
    return {
      columns1: [
        { title: 'parentId', key: 'parentId', sortable: true },
        { title: 'id', key: 'id', editable: true },
        { title: 'name', key: 'name', editable: true, className: 'demo-table-info-column' },
        { title: 'code', key: 'code', editable: true },
        { title: 'type', key: 'type', editable: true },
        { title: '状态', key: 'status', editable: true },
        {
          title: '角色关联',
          key: 'bb',
          type: 'expand',
          render: (h, params) => {
            console.log('--------------渲染开始--------------')
            console.log(params.row)
            // 更新数据
            this.tableData.forEach(function (value, index) {
              if (params.row.id === value.id) {
                params.row = value
                console.log('--------------更新数据成功--------------')
              }
            })

            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        { title: '创建时间',
          key: 'createTime',
          render: (h, params) => {
            return h('div',
              CryptoJS.formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm')
            )
          } },
        { title: '更新时间',
          key: 'updateTime',
          render: (h, params) => {
            return h('div',
              CryptoJS.formatDate(new Date(params.row.updateTime), 'yyyy-MM-dd hh:mm')
            )
          }
        }],
      tableData: [],
      // 分页
      pageSize: 10, // 每页显示多少条
      dataCount: 0, // 总条数
      pageCurrent: 1// 当前页
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    // 点击，切换页面
    changepage (index) {
      // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
      this.pageCurrent = index
      console.log('当前页：' + index)
      console.log('进入换页函数')
      getTableData(0, this.pageCurrent, this.pageSize).then(res => {
        this.tableData = res.data.data.data.list
        this.dataCount = res.data.data.data.total
        console.log(this.dataCount)
      })
    },
    // 每页显示的数据条数
    _nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.pageSize = index
    }
  },

  mounted () {
    // 需要分页,根据teamId判断,-1->获取api分类,0->获取全部api,id->获取对应分类id下的api
    let teamId = -1
    let currentPage = this.pageCurrent
    let pageSize = this.pageSize

    getTableData(teamId, currentPage, pageSize).then(res => {
      this.tableData = res.data.data.data
      this.dataCount = res.data.data.data.length
      console.log(this.dataCount)
      console.log(res.data.data.data)

      // 异步处理集合
      let ps = []
      console.log('---执行循环异步开始---')
      this.tableData.forEach(function (value, index) {
        // 获取角色ID
        let teamId = value.id
        let currentPage4Role = 1
        let pageSize4Role = 150
        let API = []
        console.log('@@@')
        const p = getTableData(teamId, currentPage4Role, pageSize4Role)
          .then(resR => {
            console.log('查询当前集合-' + teamId + '下API信息')
            console.log(resR)
            console.log('-------++-------')

            API = resR.data.data.data.list
            console.log('设置集合下API')
            value.API = API
            console.log('当前集合处理完毕')
            // arr数组中数据组织
            return 'success'
          })
        ps[index] = p
      })
      console.log('---执行循环异步完毕---')
      console.log(ps)
      return Promise.all(ps)
    }).then(arr => {
      console.log('Promise.all成功啦')
      console.log(arr)
      console.log(this.tableData)
    })
  }
}
</script>

<style>
  .ivu-table td.demo-table-info-column{
    background-color: #19a9f5;
    color: #131313;
  }

</style>
